<template>
  <div>
    <el-dialog :title="cDioOpt?.title || ''" v-if="formType == 'cDio'" v-model="dataed.open" :top="cDioOpt?.top || ''" :width="cDioOpt?.width || '500px'" append-to-body>
      <Cform :ref="(el: CFormRefType) => (dataed.cFormRef = el)" v-on="formEmitsObj" v-bind="formPropsObj">
        <template #otherItem="{ form, key }"><slot name="otherItem" :key="key" :form="form"></slot> </template>
        <template #otherFormItem="{ form }"><slot name="otherFormItem" :form="form"></slot> </template>
        <template #otherBtn="data">
          <slot name="otherBtn" :data="data"></slot>
        </template>
      </Cform>
      <template #footer>
        <span class="dialog-footer" v-if="!cDioOpt?.noFooter">
          <el-button @click="dataed.open = false">取 消</el-button>
          <el-button v-if="!cDioOpt?.noSubmit" type="primary" @click="methods.submitForm" :loading="dataed.subLoading" :disabled="dataed.subLoading">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <Cform :ref="(el: CFormRefType) => (dataed.cFormRef = el)" v-if="formType !== 'cDio'" v-on="formEmitsObj" v-bind="formPropsObj">
      <template #otherItem="{ form, key }"><slot name="otherItem" :key="key" :form="form"></slot> </template>
      <template #otherFormItem="{ form }"><slot name="otherFormItem" :form="form"></slot> </template>
      <template #otherBtn="data">
        <div v-if="formType == 'cPage'">
          <el-button type="primary" @click="methods.submitForm" :loading="dataed.cPageOpt?.isSaving" :disabled="dataed.cPageOpt?.isSaving">{{ dataed.cPageOpt?.saveTxt || "保存" }} </el-button>
          <el-button @click="methods.backToList">返回</el-button>
        </div>
        <div v-if="formType == 'cSearch'">
          <el-button type="primary" @click="methods.getListFn" :loading="dataed.searching" :disabled="dataed.searching">查询</el-button>
          <el-button v-if="!dataed.cSearchOpt?.noAdd" type="primary" @click="methods.add"> {{ dataed.cSearchOpt?.addBtnText || "新增" }} </el-button>
          <el-button v-if="!dataed.cSearchOpt?.noReset" type="primary" @click="methods.reset"> 重置 </el-button>
        </div>
        <slot name="otherBtn" :data="data"></slot>
      </template>
    </Cform>
  </div>
</template>

<script setup lang="ts">
import { formEmit, formData } from "@/components/Cform/form";
import { cPageEmit, cSearchEmit, cDioEmit, CSuperFormPropsType } from "./index";
import { cPageData, cPageFn } from "./cFormJs/cPage";
import { cSearchData, cSearchFn } from "./cFormJs/cSearch";
import { cDioData, cDioFn } from "./cFormJs/cDio";
import { deepClone } from "@/assets/utils/deepClone";
const props = defineProps<CSuperFormPropsType>();
const emit = defineEmits([...formEmit, ...cPageEmit, ...cSearchEmit, ...cDioEmit]);
const formPropsObj = ref({});
const formEmitsObj = ref({});
function formDataFn() {
  let formDate = new formData({ id: props.id, cformOpt: deepClone(props.cformOpt), formParams: deepClone(props.formParams) } as CformPropsType, emit);
  formPropsObj.value = formDate.formPropsObj;
  formEmitsObj.value = formDate.formEmitsObj;
}
let dataed: any = ref();
const initialFn = {
  cPage: { data: cPageData, fn: cPageFn },
  cSearch: { data: cSearchData, fn: cSearchFn },
  cDio: { data: cDioData, fn: cDioFn }
};
function superFormDataFn() {
  dataed.value = initialFn[props.formType].data({ dataed: dataed, propData: { formType: props.formType, [`${props.formType}Opt`]: deepClone(props[`${props.formType}Opt`]) }, emit, formEmitsObj, formPropsObj });
}
watch(
  props,
  () => {
    formDataFn();
    superFormDataFn();
  },
  { immediate: true }
);
let methods: any = ref({});
onMounted(() => {
  methods.value = initialFn[props.formType].fn(dataed);
});
defineExpose({ dataed, methods });
</script>

<style lang="scss"></style>
